import TauActionPanel from '@/components/TauActionPanel';
import TauPage from '@/components/TauPage';
import TauTable from '@/components/TauTable';
import { useStore } from '@/hooks';
import { Button } from '@alifd/next';
import { t } from '@lingui/macro';
import React, { useEffect } from 'react';
import { column } from './stores/definitions';
import { observer } from 'mobx-react-lite';
import dayjs from 'dayjs';

function ScShits({ price }) {
  const { scShitStore: store } = useStore();

  useEffect(() => {
    store.data = [];
  }, [price]);

  // 获取列表数据
  const handleSearch = (params) => {
    const { shiftDate, ...searchArgs } = params.values;
    store.search = {
      routePriceId: price.id,
      // ...searchArgs,
      shiftDate,
      findTypes: [3],
    };
  };

  return (
    <TauPage className="page-container">
      <TauActionPanel
        className="action-panel"
        onSearch={handleSearch}
        defaultValues={{ shiftDate: dayjs().format('YYYY-MM-DD') }}
        actions={[
        ]}
        searchItems={[
          {
            name: 'shiftDate',
            type: 'datetime',
            props: {
              placeholder: t`班次日期`,
              hasClear: false,
              preset: {
                [t`今天`]: () => dayjs(),
                [t`明天`]: () => dayjs().add(1, 'day'),
                [t`后天`]: () => dayjs().add(2, 'day'),
              },
            },
          },
        ]}
        keywordSearch={{ enabled: false }}
      />
      <div className="content">
        <TauTable
          primaryKey="itemId"
          tableLayout="fixed"
          currentPage={store.pg.page}
          pageSize={store.pg.size}
          total={store.total}
          sort={store.tableSort}
          onFetch={(pg) => { store.pg = pg; }}
          loading={store.loading}
          dataSource={toJS(store.data)}
          columns={[
            { title: t`序号`, dataIndex: 'idx', width: 44, cell: (v, i) => store.idx(i) },
            // { title: t`始发站`, cell: () => price.beginAreaName },
            // { title: t`终点站`, cell: () => price.endAreaName },
            column('shiftCode', {}),
            column('shiftDate', { width: 88 }),
            column('shiftTime', {}),
            column('shiftType', {}),
            { title: t`承运公司`, cell: () => price.operatingCompany.companyName },
            column('state', { width: 88 }),
            column('enabled', { width: 88 }),
            // {
            //   title: t`操作`,
            //   dataIndex: 'id',
            //   width: 100,
            //   cell: (_, __, p) => (
            //     <>
            //       <Button text type="primary" style={{ color: 'red' }} onClick={() => handleDelete(p)} >{t`删除`}</Button>
            //     </>),
            // },

          ]}
        />
      </div>
    </TauPage>
  );
}

export default observer(ScShits);
